const HighlightedText = ({ text, query }) => {
  if (!query) {
    return <p>{text}</p>
  }

  // 使用正则表达式分割字符串，保留查询条件的匹配项
  const parts = text.split(new RegExp(`(${query})`, 'gi'))

  return (
    <p>
      {parts.map((part, index) =>
        part.toLowerCase() === query.toLowerCase() ? (
          // 为匹配的片段智能体蓝色样式
          <span key={index} style={{ color: '#165dff' }}>
            {part}
          </span>
        ) : (
          // 非匹配片段正常显示
          <span key={index}>{part}</span>
        )
      )}
    </p>
  )
}

export default HighlightedText
